<template>
    <div class="count">
        <h2>当前求和为:{{sum}},放大10倍后：{{ bigSum }}</h2>
        <h3>欢迎来到{{school}},大写：{{upperSchool}}</h3>
        <h3>地址为:{{address}}</h3>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 引入userCountStore
import { UserCountStore } from '@/store/Count';
import { storeToRefs } from 'pinia';

const countStore=UserCountStore()
// console.log('@@@2',countStore.sum)
countStore.$subscribe((mutate,state)=>{
    console.log('countStore里面保存的数据发生了变化',mutate,state)
    localStorage.setItem('school',state.school)
})

// storeToRefs只会关注store中的数据，不会对方法进行ref包裹
const {sum,school,address,bigSum,upperSchool}=storeToRefs(countStore)
// 数据

let n=ref(1) //用户选择的数字

// 方法
function add(){
    // sum.value+=n.value
    // countStore.sum+=n.value;
    countStore.increment(n.value)
}
function minus(){
    // sum.value-=n.value;
    countStore.sum-=n.value;
}

</script>

<style scoped>
.count{
    border-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
select,button{
    margin: 0, 50px;
    height: 25px;
}
</style>